<template>
  <div class="w-screen h-screen flex justify-center items-center"
       style="background-image: url('../assets/bg.png');background-size: 100%">
    <div class="w-160 grid items-center">
      <div class="flex flex-col justify-center items-center">
        <div class="title">欢迎进入极慧教育平台</div>
        <div class="sub-title">输入课程名称后开启视频教学</div>
      </div>
      <el-form
          class="flex flex-col justify-center items-center px-8 h-full bg-gray-100 shadow-2xl w-150 form-box"
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
      >
        <el-form-item label="课程名称" required prop="lesson" size="large" class="x">
          <el-input v-model="form.lesson" class="f-input"/>
        </el-form-item>
        <div class="flex" style="margin-top: 49px">
          <el-button size="large" round @click="handleCreateRoom" class="button-start">开启课程教学</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {FormInstance} from "element-plus";

const rules = reactive({
  lesson: [{required: true, message: "请输入课程名称", trigger: "blur"}],
});
const form = reactive({
  lesson: "",
  roomId: "1234"
});
const router = useRouter();
const ruleFormRef = ref<FormInstance>();

async function handleCreateRoom() {
  await ruleFormRef.value?.validate((valid, fields) => {
    // fetch('http://localhost:3888/creatRoom', {
    //   method: 'post',
    //   headers: {
    //     'Accept': 'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
    //     'Content-Type': 'application/json'/* 请求内容类型 */
    //   },
    //   body: JSON.stringify({
    //     lesson: form.lesson
    //   })
    // }).then((response) => {
    //   return response.json()
    // }).then((data) => {
    //   let {roomId, code} = data
    //   if (code == 200 && valid) {
    //     router.push({path: "page", query: {...form, roomId}})
    //   }
    // }).catch(function (error) {
    //   console.log(error)
    // })
    //
    if (valid) {
      router.push({path: "page", query: {...form}})
    }
  });
}

const route = useRoute();
onMounted(() => {
  if (route.query.roomId) form.roomId = route.query.roomId as string;
});
</script>

<style lang="scss" scoped>
.title {
  font-style: normal;
  font-weight: 600;
  font-size: 56px;
  line-height: 78px;
  color: #000000;
  margin-bottom: 12px;
}

.sub-title {
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 39px;
  color: #000000;
  margin-bottom: 45px;
}

.form-box {
  box-sizing: border-box;
  width: 663px;
  height: 373px;
  background: linear-gradient(106.28deg, #C4EAFF 1.12%, rgba(200, 196, 255, 0) 102.33%);
  opacity: 0.77;
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(26px);
  border-radius: 16px;
}

.button-start {
  width: 160px;
  height: 46px;
  background: linear-gradient(92.93deg, #85D3FF 0.56%, #5350FA 98.29%);
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
}

.f-input {
  width: 359px;
  height: 43px;
  background: #FFFFFF;
  border-radius: 4px;
}
</style>
